import React,{useState}  from 'react'
import { Form, Input, Modal, Select, message,Row ,Col, Button,Upload} from 'antd';
import request from '@/http';
const { Option } = Select;
import { UploadOutlined } from '@ant-design/icons';




interface EditObject {
    Id?:Int16Array,
    isModalVisible: boolean,
    subjectName?: string,
  }
const Edit=(props: { editObject: EditObject;onClose: any})=> {

    const { editObject, onClose } = props;
    const [isModalVisible, setIsModalVisible] = React.useState(false);
    const [formObject] = Form.useForm();

    const modelOnCancel = () => {
        setIsModalVisible(false);
    };

    const [courses, setCourses] = useState<
    { key: number; name: string; id: number }[]
    >([]);
    const loadDic = async () => {
        await request
          .get('/api/Course/GetAllCourse')
          .then((response: any) => {
            if (response.code == 200) {
              const data = response.data.map((item: any, index: number) => ({
                key: item.courseId,
                id: item.id,
                name: item.courseName,
              }));
              console.log(response)
              setCourses(data);
            } else {
              message.error(response.message);
            }
          });
        }

    React.useEffect(() => {
        // console.log(editObject);
        loadDic();
        setIsModalVisible(editObject.isModalVisible);
        formObject.setFieldsValue({
        ...editObject
        });
    }, [editObject]);
    return(
        <>
            <Modal
        width={400}
        title='题目添加'
        visible={isModalVisible}
        onCancel={modelOnCancel}
        maskClosable={false}
        destroyOnClose
        style={{ top: '20vh' }}
        footer={false}
      >
        <Form name="editForm" preserve={false} form={formObject} onFinish={async(values: any) =>{
          if(!editObject.Id){
          console.log(values);
            await request.post('/api/Topic/TopicCreate?courseId='+values.courseName,{
                "id":values.id,
                "title":values.title,
                "options":values.options,
                "trueAnswer":values.trueAnswer,
                "score":values.score,
                'type':values.type
            }).then((response:any)=>{
              if(response.code==200){
                message.success(response.message);
                onClose();
                setIsModalVisible(false);
              }else{
                message.success(response.message);
              }
            })
          }else{
            await request.post('/api/Course/EditCourse?id='+editObject.Id+'&courseName='+values.subjectName).then((response:any)=>{
              if(response.code==200){
                message.success(response.message);
                onClose();
                setIsModalVisible(false);
              }else{
                message.success(response.message);
              }
            })
          }
          
        }}>
          <Row gutter={24} justify='center' >
            <Col span={20} key='1'>
              <Form.Item
                label="题目"
                name="title"
                rules={[
                  { required: true, whitespace: true, message: '不能为空!' },
                  ]}
              >
                <Input placeholder="请录入" />
              </Form.Item>
              <Form.Item
                label="题型"
                name="options"
              >
                <Select placeholder='请选择'>
                    <Option value={1} key={0}>选择</Option>
                    <Option value={2} key={1}>判断</Option>
                    <Option value={3} key={2}>填空</Option>
                </Select>
              </Form.Item>
              <Form.Item
                label="科目"
                name="courseName"
              >
                <Select 
                    placeholder="请选择"
                  >
                    {courses.map((item) => (
                      <Option value={item.id} >
                        {item.name}
                      </Option>
                    ))}
                  </Select>
              </Form.Item>
              <Form.Item
                label="分值"
                name="score"
                rules={[
                  { required: true, whitespace: true, message: '不能为空!' },
                  { max: 30, message: '最大长度不能超过30!' },
                  ]}
              >
                <Input placeholder="请录入" />
              </Form.Item>
              <Form.Item
                label="正确答案"
                name="trueAnswer"
                rules={[
                  { required: true, whitespace: true, message: '不能为空!' },
                  { max: 30, message: '最大长度不能超过30!' },
                  ]}
              >
                <Input placeholder="请录入" />
              </Form.Item>
            </Col>
            <Col >
            <Form.Item>
              <Button
                style={{marginRight:10}}
                htmlType='submit'
              >确认</Button>
              <Button
              onClick={modelOnCancel}
              >取消</Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
        </>
    )
}
export { EditObject, Edit };

